<template>
  <div class="add-push-item">
    <ul class="pics">
      <li v-for="(picItem, picIndex) in item.pics" :key="picIndex" @click.capture="onClick(picIndex)">
        <div v-if="picItem.loading" v-loading="picItem.loading" class="loading-con"></div>
        <img v-else :src="picItem.pic_url">
        <el-upload
          :action="fileUploadS3Url"
          multiple
          name="pic"
          :with-credentials="true"
          :data="{siteid: site_id, pic_index: picIndex}"
          :limit="limitUploadNum"
          :show-file-list="false"
          :on-success="onUpdateWbPic"
          :before-upload="onUpdataBeforeUpload"
          >
          <p>更换图片</p>
        </el-upload>
        <el-icon class="btn-delete" @click.stop.prevent="onDeleteWbImgItem(picIndex)"><circle-close-filled /></el-icon>
      </li>
      <li v-if="item.pics.length < 9">
        <el-upload
          :action="fileUploadS3Url"
          multiple
          name="pic"
          :with-credentials="true"
          :data="{siteid: site_id}"
          :limit="limitUploadNum"
          :show-file-list="false"
          :on-success="onAddWbPic"
          :before-upload="onAddUpdateBeforeUpload"
          >
          <el-icon><plus /></el-icon>添加图片
        </el-upload>
      </li>
    </ul>
    <!-- <ul class="input-pics">
      <li v-for="(picItem, picIndex) in item.pics" :key="picIndex">
        <input-normal label="地址" v-model="picItem.pic_url"  @change="onUpdateWbImgItem(picIndex)"></input-normal>
      </li>
    </ul> -->
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import { fileUploadS3Url } from '@/api/api';
// import InputNormal from '@/views/components/edit/InputNormal.vue'

// import { MEDIAS } from '@/common/const'
// 


import { randomUploadFileName } from "@/plugins/utils"

export default {
  setup () {
    return {
      limitUploadNum: 9,
      size: 1024 * 1024 * 1,
      fileUploadS3Url: fileUploadS3Url,
      currentItemIndex: -1
    };
  },
  components: {
  },
  props: {
    item: {
      type: Object,
      default: null,
    },
    index: {
      type: [Number, String],
      default: -1
    },
    controlId: {
      type: [Number, String],
      default: -1
    },
  },
  computed: {
    ...mapState("components", {
      site_id: (state) => state.id
    }),
  },
  methods: {
    ...mapActions({
      setMediaPop: "setMediaPop",
      updateWbComponentItem: "wbComponents/updateWbComponentItem",
      deleteWbComponentItem: "wbComponents/deleteWbComponentItem",
    }),
    onClick(picIndex){
      this.currentItemIndex = picIndex;
      if(!this.item.pics[picIndex].pic_id){
        this.onDeleteWbImgItem(picIndex);
      }
    },
    onAddUpdateBeforeUpload(file){
      this.beforeUpload(file, true)
    },
    onUpdataBeforeUpload(file){
      this.beforeUpload(file, false)
    },
    beforeUpload(file, isAdd){
      let suffix = file.name.split(".")[1];
      file.filename = randomUploadFileName(this.site_id) + "." + suffix;
      let isJPG;
      if(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpeg'){
        isJPG = true
      }
      const isLt2M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error('上传文件格式不对!');
        return false;

      }
      if (!isLt2M) {
        this.$message.error(`上传文件大小不能超过 ${this.size/1024/1024}M !`);
        return false;

      }
      if(isJPG && isLt2M){
        if(isAdd){
          this.item.pics.push({ loading: true, pic_id:'', pic_url: ''});
        }else{
          this.item.pics[this.currentItemIndex]['loading'] = true;
          // Vue.set(this.item.pics[this.currentItemIndex], 'loading', true);
        }
      }
      return isJPG && isLt2M;
    },
    onDeleteWbImgItem(picIndex){
      this.item.pics.splice(picIndex, 1);
      let params = {item: this.item, index:this.index, controlId: this.controlId};
      this.updateWbComponentItem(params);
    },
    onUpdateWbImgItem(){
      let params = {item:this.item, index:this.index, controlId: this.controlId};
      this.updateWbComponentItem(params);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // onSuccess(response, file, fileList){
    onUpdateWbPic(response){
      if(response.code > 0){
        this.$notify.success({
          title: '',
          message: response.msg,
          showClose: false
        });
        this.onDeleteWbImgItem(this.currentItemIndex >= 0 ? this.currentItemIndex : this.item.pics.length-1);
      }else{
        let data = response.data;
        this.item.pics[data.pic_index].loading = false
        this.item.pics[data.pic_index].pic_id = data.pic_id
        this.item.pics[data.pic_index].pic_url = data.original_pic
        let params = {item:this.item, index:this.index, controlId: this.controlId};
        this.updateWbComponentItem(params);
      }
    },
    onAddWbPic(response){
      if(response.code > 0){
        this.$notify.success({
          title: '',
          message: response.msg,
          showClose: false
        });
        this.onDeleteWbImgItem(this.currentItemIndex >= 0 ? this.currentItemIndex : this.item.pics.length-1);
      }else{
        let data = response.data;
        let len = this.item.pics.length;

        for(let i = 0; i < len;  i++){
          let pic = this.item.pics[i]
          if(this.isHasOwnProperty(pic, 'loading') && pic.loading){
            pic.loading = false
            pic.pic_id = data.pic_id
            pic.pic_url = data.original_pic
            pic.original = data.original_pic
            pic.thumbnail = data.thumbnail_pic
            break;
          }
        }
        let params = {item: this.item, index:this.index, controlId: this.controlId};
        this.updateWbComponentItem(params);
      }
    },
    isHasOwnProperty(obj, attr){
      return Object.prototype.hasOwnProperty.call(obj, attr)
    },
  },
};
</script>
